<form class="search-area" fxLayoutGap="16px">
  <mat-form-field floatLabel="never">
    <mat-select (selectionChange)="query($event)" [formControl]="workshopIdCtrl" [placeholder]="'workshop'|translate" required>
      <mat-option *ngFor="let it of workshops$|async" [value]="it.id">
        {{it.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>
  <span fxFlex></span>
  <button (click)="create()" *ngIf="isAdmin$|async" mat-mini-fab tabindex="-1" type="button">
    <mat-icon>add</mat-icon>
  </button>
</form>

<mat-divider></mat-divider>

<mat-table [dataSource]="lines$" fxFlex>
  <ng-container matColumnDef="workshop">
    <mat-header-cell *matHeaderCellDef>{{'workshop'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">{{row.workshop.name}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef>{{'Common.name'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">{{row.name}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="doffingType">
    <mat-header-cell *matHeaderCellDef>{{'doffingType'|translate}}</mat-header-cell>
    <mat-cell *matCellDef="let row">{{('DoffingType.' + row.doffingType)|translate}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="btns">
    <mat-header-cell *matHeaderCellDef>{{'Common.operation'|translate}}</mat-header-cell>
    <mat-cell (click)="update(row)" *matCellDef="let row" matRipple>
      <mat-icon>edit</mat-icon>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns$|async; sticky: true"></mat-header-row>
  <mat-row (dblclick)="doffingConfig(row)" *matRowDef="let row; columns: displayedColumns$|async;"></mat-row>
</mat-table>
